<template>
    <div class="pc-container">
         <Card style="width:320px;">
             <Form ref="retrieveForm" :model="retrieveForm" :rules="ruleForm" :label-width="80">
                 <FormItem label="手机号码" prop="phonenumber">
                     <Input type="text" v-model="retrieveForm.phonenumber" placeholder="请输入手机号码" />
                 </FormItem>
                   <FormItem label="新密码" prop="password">
                     <Input type="password" v-model="retrieveForm.password" placeholder="请输入密码" />
                 </FormItem>
                   <FormItem label="确认密码" prop="configPwd">
                     <Input type="password" v-model="retrieveForm.configPwd" placeholder="确认密码" />
                 </FormItem>
                 <FormItem label="验证码" prop="code">
                      <Input v-model="retrieveForm.code" placeholder="请输入验证码">
                       <Button :disabled="canClick" slot="append"  @click="handlerCode">{{codeText}}</Button>
                      </Input>
                 </FormItem>
                 <FormItem>
                    <Button :loading="loading" type="primary" style="width:100%;" @click="handleEnt('retrieveForm')">
                          <span v-if="!loading">确&nbsp;&nbsp;&nbsp;定</span>
                          <span v-else>Loading...</span>
                    </Button>
                </FormItem>
             </Form>
         </Card>
    </div>
</template>

<script>
import {validPhoneNumber} from '@/utils/validate'
export default {
    data(){
         const validatePhoneNumber=(rule,value,callback)=>{
                if(value===''){
                    callback(new Error('手机号码不能为空'))
                }
                else if(!validPhoneNumber(value)){
                    callback(new Error('请输入正确的手机号码'))
                }
                else{
                    callback()
                }
            }
         const validatePassword=(rule,value,callback)=>{
                if(value===''){
                    callback(new Error('新密码不能为空'))
                }
                else{
                    callback()
                }
         }
         const validateConfigPwd=(rule,value,callback)=>{
              if(value===''){
                  callback(new Error('确认密码不能为空'))
              }
              else if(value!=this.retrieveForm.configPwd){
                  callback(new Error('新密码与确认密码不一致'))
              }
              else{
                  callback()
              }
         }
        return {
            loading:false,
            retrieveForm:{
                   phonenumber: '',
                   code: '',
                   password:'',
                   configPwd:''
            },
            canClick:false,
            codeText:'获取验证码',
            totalTime:60,
            ruleForm: {
                    phonenumber: [{ required: true, trigger: 'blur',validator:validatePhoneNumber }],
                    password:[{required:true,trigger:'blur'}],
                    configPwd:[{required:true,trigger:'blur',validator:validateConfigPwd}],
                    code: [
                        { required: true, message: '验证码不能为空', trigger: 'blur' },
                        { type: 'string', min: 6,max:6, message: '验证码长度为6位字符', trigger: 'blur' }
                    ]
            }
        }
    },
    methods:{
        handlerCode(){
            if(this.totalTime===60){
             this.canClick=true
             let clock = window.setInterval(() => {
            this.totalTime--
            this.codeText = this.totalTime + 's后重新发送'
            if (this.totalTime < 0) {     //当倒计时小于0时清除定时器
                window.clearInterval(clock)
                this.codeText = '重新发送验证码'
                this.totalTime = 60
                this.canClick=false
                }
            },1000)
            }
            else{
                 this.$Message.error(this.totalTime+'s后重新发送')
            }
           
        },
        handleEnt(){

        }
    }
}
</script>

<style lang="scss" scoped>
.disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed; // 鼠标变化
}
</style>>